<template>
	<Dybg>
		<view>

			<cu-custom bgColor="bg-gradual-them" :isBack="false">
				<!-- <block slot="backText">返回</block> -->
				<block slot="content">查猫</block>
			</cu-custom>

			<view class="u-search-box mystyle_1">
				<view>
					<image :src="logo" mode="aspectFill" class="logo">
					</image>
				</view>

				<!-- <view class="u-search-inner" style="width: 85%;">
							<u-icon name="search" color="#909399" :size="28"></u-icon>
							<text class="u-search-text">请输入要查询的猫猫昵称</text>
						</view> -->

				<view style="width: 85%;" @click="goQuery()">
					<u-search :show-action="false" :disabled="true" :maxlength="6" placeholder="请输入要查询的猫猫昵称"
						v-model="keyword"></u-search>
				</view>

			</view>


			<!-- 		<demo-title title="3D切换效果">
					  <tn-swiper :list="list" :effect3d="true"></tn-swiper>
					</demo-title> -->

			<!-- 		<view style="width: 90%;margin: 40rpx auto;">
						<u-button type="primary" @click="open">获取信息</u-button>
					</view> -->

			<view class="cat-menu x-c" style="background-color:rgba(255, 255, 255, 1); height: 200rpx;margin-top: 50rpx;margin-bottom: 50rpx;">
				<!-- 方式12 start-->
				<view class="x-ac" style="background-color:rgba(255, 255, 255, 1.0); width: 95%;">

				<view class="tn-flex-1  tn-radius" @click="goNotice()">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center"
						style="background-color:rgba(255, 255, 255, 1.0);">
						<view
							class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-purplered--light tn-color-purplered">
							<view class="tn-icon-like-fill tn-three"></view>
						</view>
						<view class="tn-color-black tn-text-center">
							<text class="tn-text-ellipsis">信息公告</text>
						</view>
					</view>
				</view>

				<view class="tn-flex-1  tn-radius" @click="goSearch()">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view
							class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-purple--light tn-color-purple">
							<view class="tn-icon-order-fill tn-three"></view>
						</view>
						<view class="tn-color-black tn-text-center">
							<text class="tn-text-ellipsis">猫咪百科</text>
						</view>
					</view>
				</view>

				<view class="tn-flex-1  tn-radius" @click="goCatRecognize()">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view
							class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-indigo--light tn-color-indigo">
							<view class="tn-icon-live-stream-fill tn-three"></view>
						</view>
						<view class="tn-color-black tn-text-center">
							<text class="tn-text-ellipsis">猫咪识别</text>
						</view>
					</view>
				</view>


				<view class="tn-flex-1tn-radius" @click="goRank()">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view class="icon12__item--icon tn-shadow-blur tn-main-gradient-orange--light tn-color-orange">
							<view class="tn-icon-statistics-fill tn-three"></view>
						</view>
						<view class="tn-color-black tn-text-center">
							<text class="tn-text-ellipsis">热度排行</text>
						</view>
					</view>
				</view>

				</view>
				<!-- 方式12 end-->
			</view>


			<!-- 公告 -->
			<!-- 		<view class="message-box">
						<view class="page-section swiper">
							<view class="page-section-spacing">
								<swiper style="height: 120rpx;" class="swiper" vertical="ture" circular="true"
									indicator-dots='false' indicator-color="rgba(0,0,0,.0)" indicator-active-color="rgba(0,0,0,.0)"
									autoplay="true" interval="4000">
									<swiper-item class="swiper-list" v-for="(item, index) in messageData" :key="index">
										<view class="message-tltle">{{item.title}}</view>
										<view class="message-content"><span>{{item.tag}}</span>{{item.content}}</view>
									</swiper-item>
								</swiper>
							</view>
						</view>
					</view> -->


			<!-- 查猫    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ -->
			<view class="cat-menu">
				<view class="cu-bar ">
					<view class="action sub-title">
						<text class="text-xl text-bold text-them text-shadow">🔍 查猫</text>
						<text class="text-ABC text-them"> </text>
					</view>

					<!-- <view class="action" @click="goVideo"><text class="text-lg text-grey text-shadow">更多</text></view> -->

				</view>

				<view>

					<view v-for="(item, id) in recentyList" :key="id">
						<view class="cu-list menu-avatar" @click="moreCat(id)">


							<view class="cu-item">

								<!-- 猫咪头像 -->
								<!-- 				<view class="cu-avatar round lg" 
												:style="[{backgroundImage:'url(https://ossweb-img.qq.com/images/lol/web201310/skin/big2100'+ (index+2) +'.jpg)'}]"> -->
								<view class="cu-avatar round lg bg-gradual-them">
									<image :src="item.bannerImg" mode="aspectFill" class="cat-head"></image>
								</view>
								<!-- 猫咪类型 -->
								<view class="content">
									<view class="text-cut ">{{item.nickname}}</view>
								</view>

							</view>
						</view>

					</view>
				</view>

			</view>



			<view style="height: 200rpx;width: 1rpx;"></view>

			<u-toast ref="uToast" />
		</view>
	</Dybg>

</template>

<script>
	import Dybg from '../../components/mxl-Dybg/Dybg.vue'


	export default {
		components: {
			Dybg,
		},

		data() {
			return {

				logo: '../../static/img/avatar.png',

				list: [{
						image: 'https://tnuiimage.tnkjapp.com/swiper/spring.jpg',
						title: '春天'
					},
					{
						image: 'https://tnuiimage.tnkjapp.com/swiper/summer.jpg',
						title: '夏天'
					},
					{
						image: 'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg',
						title: '秋天'
					},
					{
						image: 'https://tnuiimage.tnkjapp.com/swiper/winter.jpg',
						title: '冬天'
					},
				],

				// 猫猫信息
				modalName: null,
				skin: false,
				listTouchStart: 0,
				listTouchStartY: 0,
				listTouchDirection: null,
				isLoad: true,
				recentyList: [{
						getId: "0",
						bannerImg: "https://img.kancloud.cn/3b/1c/3b1c221a8f021db76337ec80ab584773_200x200.png",
						nickname: "全部猫猫",

					},
					{
						getId: "1",
						bannerImg: "https://img.kancloud.cn/66/69/6669c059a62c0c5afa4aba44ee3f0199_200x200.png",
						nickname: "三花和玳瑁",

					},
					{
						getId: "2",
						bannerImg: "https://img.kancloud.cn/4a/12/4a1241afb6a821466a79bd98393ec8db_200x200.png",
						nickname: "橘猫和橘白",

					},
					{
						getId: "3",
						bannerImg: "https://img.kancloud.cn/5c/9e/5c9e2db65990969197443bca70540d35_200x200.png",
						nickname: "奶牛",

					},
					{
						getId: "4",
						bannerImg: "https://img.kancloud.cn/ad/6d/ad6daf34f041f5025a96e0446988e1cc_200x200.png",
						nickname: "狸花",
					},
					{
						getId: "5",
						bannerImg: "https://img.kancloud.cn/83/65/8365174e1483571491e621b3c6a71cc4_200x200.png",
						nickname: "纯色",
					}
				],


				// 通知
				messageData: [{
						title: '喂猫需谨慎！撸猫要慎重！',
						tag: '注意',
						content: '详情可移步到猫咪百科'
					},
					{
						title: '如果你也喜欢猫咪，可以加入我们！',
						tag: '提示',
						content: '猫猫小程序交流群：133808502'
					}
				],

				// 搜索
				keyword: '',


			};
		},
		watch: {},
		onReady() {

		},

		mounted() {

		},
		onLoad() {

		},
		methods: {
			// 用户按下输入触发
			goQuery() {
				// 跳转到下一个页面
				uni.navigateTo({
					url: '/subPages/catSearch/catSearch',
				});
			},

			// 识别猫咪功能
			goCatRecognize() {
				// 跳转到下一个页面
				uni.navigateTo({
					url: '/subPages/catMenu/recognize',
				});
			},

			// 公告跳转
			goNotice() {
				uni.navigateTo({
					url: '/subPages/catMenu/notice',
				});
			},

			// 排行榜跳转
			goRank() {
				uni.navigateTo({
					url: '/subPages/catMenu/rank',
				});
			},

			// 百科
			goSearch() {
				uni.navigateTo({
					url: '/subPages/catMenu/search',
				});
			},

			moreCat(id) {
				uni.navigateTo({
					url: '/subPages/catView/cattype?id=' + id,
					// url: '/catView/cattype?id=' + id,
					// ../video?id=' + id
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	/* 内容布局 start*/
	.cat-menu {
		background-color: rgba(255, 255, 255, 1);
		width: 85%;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 15rpx !important;
		margin: auto;
	}


	.cat-head {
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
	}




	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.message-box {
		width: 100%;
		height: 120rpx;
		background: url(https://zhoukaiwen.com/img/icon/clock.gif) #FFFFFF;
		background-repeat: no-repeat;
		background-size: 100rpx 100rpx;
		background-position: 15rpx 10rpx;
		margin: 0rpx 0rpx 10rpx 0rpx;
		padding-left: 130rpx;

		.message-tltle {
			height: 65rpx;
			line-height: 70rpx;
			font-weight: 600;
			font-size: 28rpx;
		}

		.message-content {
			color: $them-color-primary;

			span {
				background-color: $them-color-primary;
				color: #FFFFFF;
				padding: 2rpx 8rpx;
				border-radius: 8rpx;
				margin-right: 8rpx;
			}
		}
	}

	/*scroll-view外层*/
	.skill-sequence-panel-content-wrapper {
		position: relative;
		white-space: nowrap;
		padding: 10rpx 0 10rpx 10rpx;
	}




	// 搜索
	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	// 头像
	.logo {
		border-radius: 50%;
		width: 70rpx;
		height: 70rpx;
	}

	.mystyle_1 {
		position: relative;
		display: flex;
		// padding: 0 30upx;
		// min-height: 100upx;
		background-color: #ffffff;
		justify-content: space-between;
		align-items: center;
	}

	/*flex布局(colorui里面也有相关基础样式)*/
	/* x水平排列*/
	.x-f {
		display: flex;
		align-items: center;
	}

	/*x两端且水平居中*/
	.x-bc {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/*x平分且水平居中*/
	.x-ac {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	/*x水平靠上对齐*/
	.x-start {
		display: flex;
		align-items: flex-start;
	}

	/*x水平靠下对齐*/
	.x-end {
		display: flex;
		align-items: flex-end;
	}

	/*上下左右居中*/
	.x-c {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/*y竖直靠左*/
	.y-start {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	/*y竖直靠右*/
	.y-end {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	/*y竖直居中*/
	.y-f {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* y竖直两端*/
	.y-b {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	/*y竖直两端居中*/
	.y-bc {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	/* 图标容器12 start */
	.tn-three {
		position: absolute;
		top: 50%;
		right: 50%;
		bottom: 50%;
		left: 50%;
		transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
		text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
	}

	.icon12 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);


				}
			}
		}
	}
</style>
